<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>前端设计与可视化 | 小朱的网站</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/fav.ico">
    <link rel="stylesheet" href="/css/katex.min.css">
    <link rel="stylesheet" href="/css/github-markdown.min.css">
    <meta name="description" content="网页测试">
    
    <link rel="preload" href="/assets/css/0.styles.7f64417e.css" as="style"><link rel="preload" href="/assets/js/app.adf242e6.js" as="script"><link rel="preload" href="/assets/js/2.8cf67c90.js" as="script"><link rel="preload" href="/assets/js/17.bc458c69.js" as="script"><link rel="prefetch" href="/assets/js/10.15f163a4.js"><link rel="prefetch" href="/assets/js/11.a27afcec.js"><link rel="prefetch" href="/assets/js/12.27eb6ae9.js"><link rel="prefetch" href="/assets/js/13.0264e853.js"><link rel="prefetch" href="/assets/js/14.0e338da5.js"><link rel="prefetch" href="/assets/js/15.18feaada.js"><link rel="prefetch" href="/assets/js/16.131aa977.js"><link rel="prefetch" href="/assets/js/18.a943de2b.js"><link rel="prefetch" href="/assets/js/19.28b106c6.js"><link rel="prefetch" href="/assets/js/20.3b5e14bb.js"><link rel="prefetch" href="/assets/js/21.76010c7a.js"><link rel="prefetch" href="/assets/js/22.a1f4c10c.js"><link rel="prefetch" href="/assets/js/23.c62fd73c.js"><link rel="prefetch" href="/assets/js/24.29fa4cff.js"><link rel="prefetch" href="/assets/js/25.d0caf08f.js"><link rel="prefetch" href="/assets/js/26.fcbe8a2e.js"><link rel="prefetch" href="/assets/js/27.028c550c.js"><link rel="prefetch" href="/assets/js/28.94fcec24.js"><link rel="prefetch" href="/assets/js/29.d2fd21a3.js"><link rel="prefetch" href="/assets/js/3.7b0f057b.js"><link rel="prefetch" href="/assets/js/30.e219df5c.js"><link rel="prefetch" href="/assets/js/31.26e4967d.js"><link rel="prefetch" href="/assets/js/32.dd5db7fd.js"><link rel="prefetch" href="/assets/js/33.541725d2.js"><link rel="prefetch" href="/assets/js/34.7269715f.js"><link rel="prefetch" href="/assets/js/35.19b86b0e.js"><link rel="prefetch" href="/assets/js/36.240ce0fb.js"><link rel="prefetch" href="/assets/js/37.3b5e2f37.js"><link rel="prefetch" href="/assets/js/4.60158cd1.js"><link rel="prefetch" href="/assets/js/5.6154fd2f.js"><link rel="prefetch" href="/assets/js/6.d914717c.js"><link rel="prefetch" href="/assets/js/7.e50321c3.js"><link rel="prefetch" href="/assets/js/8.50a0932a.js"><link rel="prefetch" href="/assets/js/9.5e7ea4bd.js">
    <link rel="stylesheet" href="/assets/css/0.styles.7f64417e.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">小朱的网站</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="https://datav.aliyuncs.com/share/c5fe85f805b0425186d01be47dc34322" target="_blank" rel="noopener noreferrer" class="nav-link external">
  数据可视化实践
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/front-end/" class="nav-link router-link-active">
  前端技术小结
</a></div><div class="nav-item"><a href="/office/" class="nav-link">
  高效办公方法
</a></div><div class="nav-item"><a href="/general/" class="nav-link">
  通用知识速查
</a></div><div class="nav-item"><a href="/CPC/" class="nav-link">
  政治教育学习
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="⭐️资源" class="dropdown-title"><span class="title">⭐️资源</span> <span class="arrow down"></span></button> <button type="button" aria-label="⭐️资源" class="mobile-dropdown-title"><span class="title">⭐️资源</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://echarts.apache.org/examples/zh/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  echarts示例
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://report.anji-plus.com/report-doc/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  AJ-Report
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://help.aliyun.com/document_detail/86874.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  阿里云DataV
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://gitee.com/all-about-git" target="_blank" rel="noopener noreferrer" class="nav-link external">
  码云Git大全
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.dedao.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  得到APP网页版
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://edu.dji.com/hub/docs" target="_blank" rel="noopener noreferrer" class="nav-link external">
  大疆教育平台
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="https://datav.aliyuncs.com/share/c5fe85f805b0425186d01be47dc34322" target="_blank" rel="noopener noreferrer" class="nav-link external">
  数据可视化实践
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/front-end/" class="nav-link router-link-active">
  前端技术小结
</a></div><div class="nav-item"><a href="/office/" class="nav-link">
  高效办公方法
</a></div><div class="nav-item"><a href="/general/" class="nav-link">
  通用知识速查
</a></div><div class="nav-item"><a href="/CPC/" class="nav-link">
  政治教育学习
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="⭐️资源" class="dropdown-title"><span class="title">⭐️资源</span> <span class="arrow down"></span></button> <button type="button" aria-label="⭐️资源" class="mobile-dropdown-title"><span class="title">⭐️资源</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://echarts.apache.org/examples/zh/index.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  echarts示例
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://report.anji-plus.com/report-doc/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  AJ-Report
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://help.aliyun.com/document_detail/86874.html" target="_blank" rel="noopener noreferrer" class="nav-link external">
  阿里云DataV
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://gitee.com/all-about-git" target="_blank" rel="noopener noreferrer" class="nav-link external">
  码云Git大全
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://www.dedao.cn/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  得到APP网页版
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://edu.dji.com/hub/docs" target="_blank" rel="noopener noreferrer" class="nav-link external">
  大疆教育平台
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><a href="/front-end/javascript.html" class="sidebar-link">Javascript/ECMAScript 相关技术</a></li><li><a href="/front-end/pattern.html" class="sidebar-link">前端设计模式</a></li><li><a href="/front-end/typescript.html" class="sidebar-link">学习 Typescript 实战开发</a></li><li><a href="/front-end/es6.html" class="sidebar-link">深入理解ES6</a></li><li><a href="/front-end/css.html" class="sidebar-link">css 实战学习</a></li><li><a href="/front-end/node.html" class="sidebar-link">Node.js深入浅出</a></li><li><a href="/front-end/design.html" aria-current="page" class="active sidebar-link">前端设计与可视化</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end/design.html#色系搭配" class="sidebar-link">色系搭配</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end/design.html#antd-色系" class="sidebar-link">Antd 色系</a></li></ul></li><li class="sidebar-sub-header"><a href="/front-end/design.html#echarts-技巧" class="sidebar-link">Echarts 技巧</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/front-end/design.html#echarts-常用概念" class="sidebar-link">Echarts 常用概念</a></li><li class="sidebar-sub-header"><a href="/front-end/design.html#导出-svg-图片" class="sidebar-link">导出 svg 图片</a></li></ul></li><li class="sidebar-sub-header"><a href="/front-end/design.html#甘特图创建" class="sidebar-link">甘特图创建</a></li></ul></li><li><a href="/front-end/npm.html" class="sidebar-link">npm常用命令</a></li><li><a href="/front-end/vuepress.html" class="sidebar-link">vuepress 基本配置</a></li><li><a href="/front-end/babel.html" class="sidebar-link">Babel详细学习</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="前端设计与可视化"><a href="#前端设计与可视化" class="header-anchor">#</a> 前端设计与可视化</h1> <h2 id="色系搭配"><a href="#色系搭配" class="header-anchor">#</a> 色系搭配</h2> <h3 id="antd-色系"><a href="#antd-色系" class="header-anchor">#</a> Antd 色系</h3> <blockquote><p>Ant Design 是阿里巴巴出的一款前端 UI 框架, <a href="https://ant.design/docs/spec/colors-cn" target="_blank" rel="noopener noreferrer">Antd 色彩体系<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>解读成两个层面：系统级色彩体系和产品级色彩体系.</p></blockquote> <h4 id="antd-色板"><a href="#antd-色板" class="header-anchor">#</a> Antd 色板</h4> <p>Ant Design 的基础色板共计 120 个颜色，包含 12 个主色以及衍生色。这些颜色基本可以满足中后台设计中对于颜色的需求。<br> <img src="https://s1.ax1x.com/2020/03/30/GmmRfO.png" alt="Antd色系1"><br> <img src="https://s1.ax1x.com/2020/03/30/GmnWEq.png" alt="Antd色系2"><br> <img src="https://s1.ax1x.com/2020/03/30/GmK3OH.png" alt="Antd色系3"><br>
中性色包含了黑、白、灰。在蚂蚁中后台的网页设计中被大量使用到，合理地选择中性色能够令页面信息具备良好的主次关系，助力阅读体验。Ant Design 的中性色板一共包含了从白到黑的 13 个颜色。<br> <img src="https://s1.ax1x.com/2020/03/30/GmuDd1.png" alt="Antd中性色板"></p> <p><a href="https://www.yuque.com/docs/share/98fd436e-bf79-4242-9ccd-2eeb74234ce6?#" target="_blank" rel="noopener noreferrer">AntV 色板色彩值<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>记录了很详细的色彩选取规则和颜色.</p> <h4 id="分类色板"><a href="#分类色板" class="header-anchor">#</a> 分类色板</h4> <p>分类色板用于描述分类数据，如苹果、香蕉、梨，常用一个颜色代表一个值以区分不同类型，取色时色相分布均衡，相邻颜色之间明暗需考虑差异性，常用于饼图的不同分类、填充地图中的不同国家、关系图中的不同角色等。<br> <img src="https://s1.ax1x.com/2020/03/30/GmMZjg.png" alt="Antd分类色板"><br> <img src="https://s1.ax1x.com/2020/03/30/GmQkZ9.png" alt="10-20色分类面板"></p> <div class="language-json extra-class"><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token comment">// 基础十色系</span>
  <span class="token property">&quot;color&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token string">&quot;#5B8FF9&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;#5AD8A6&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;#5D7092&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;#F6BD16&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;#E8684A&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;#6DC8EC&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;#9270CA&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;#FF9D4D&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;#269A99&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;#FF99C3&quot;</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>
</code></pre></div><h4 id="单一顺序色板"><a href="#单一顺序色板" class="header-anchor">#</a> 单一顺序色板</h4> <p>最多支持 8 色，最少支持 2 色<br> <img src="https://s1.ax1x.com/2020/03/30/GmQaQS.png" alt="Antd单一顺序色板"></p> <h4 id="邻近色色板"><a href="#邻近色色板" class="header-anchor">#</a> 邻近色色板</h4> <p>最多支持 9 色，最少支持 2 色<br> <img src="https://s1.ax1x.com/2020/03/30/GmlNkR.png" alt="Antd邻近色色板"></p> <h2 id="echarts-技巧"><a href="#echarts-技巧" class="header-anchor">#</a> Echarts 技巧</h2> <blockquote><p><a href="https://www.echartsjs.com/zh/index.html" target="_blank" rel="noopener noreferrer">Echarts<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>是百度开源的图表可视化工具, 主要用于前端数据可视化, <a href="https://www.echartsjs.com/examples/zh/index.html" target="_blank" rel="noopener noreferrer">官方实例<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>十分丰富, <a href="https://www.echartsjs.com/zh/option.html#title" target="_blank" rel="noopener noreferrer">配置项手册<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>说明也很详细.</p></blockquote> <h3 id="echarts-常用概念"><a href="#echarts-常用概念" class="header-anchor">#</a> Echarts 常用概念</h3> <p><strong>(1) 系列（series）</strong><br> <code>系列</code>（series）是很常见的名词。在 echarts 里，<code>系列</code>（series）是指：一组数值以及他们映射成的图。“系列”这个词原本可能来源于“一系列的数据”，而在 echarts 中取其扩展的概念，不仅表示数据，也表示数据映射成为的图。所以，一个 <code>系列</code> 包含的要素至少有：一组数值、图表类型（<code>series.type</code>）、以及其他的关于这些数据如何映射成图的参数。</p> <p>echarts 里系列类型（<code>series.type</code>）就是图表类型。系列类型（<code>series.type</code>）至少有：line（折线图）、bar（柱状图）、pie（饼图）、scatter（散点图）、graph（关系图）、tree（树图）、...如下图，右侧的 <code>option</code> 中声明了三个 <code>系列</code>（series）：pie（饼图系列）、line（折线图系列）、bar（柱状图系列），每个系列中有他所需要的数据（<code>series.data</code>）。<br> <img src="https://s1.ax1x.com/2020/03/31/Gl8Pn1.png" alt="series配置方式"></p> <p>类同地，下图中是另一种配置方式，系列的数据从<code>dataset</code>中取：<br> <img src="https://s1.ax1x.com/2020/03/31/GlGwxH.png" alt="dataset配置方式"></p> <p><strong>(2) 组件（component）</strong><br>
在系列之上，echarts 中各种内容，被抽象为“组件”。例如，echarts 中至少有这些组件：xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）、...</p> <p>我们注意到，其实系列（series）也是一种组件，可以理解为：系列是专门绘制“图”的组件。</p> <p>如下图，右侧的 option 中声明了各个组件（包括系列），各个组件就出现在图中。<br> <img src="https://s1.ax1x.com/2020/03/31/GlJVQH.png" alt="echarts组件分布"></p> <p><strong>(3) 坐标系</strong><br>
很多系列，例如 line（折线图）、bar（柱状图）、scatter（散点图）、heatmap（热力图）等等，需要运行在 “坐标系” 上。坐标系用于布局这些图，以及显示数据的刻度等等。例如 echarts 中至少支持这些坐标系：直角坐标系、极坐标系、地理坐标系（GEO）、单轴坐标系、日历坐标系 等。其他一些系列，例如 pie（饼图）、tree（树图）等等，并不依赖坐标系，能独立存在。还有一些图，例如 graph（关系图）等，既能独立存在，也能布局在坐标系中，依据用户的设定而来。</p> <p>一个坐标系，可能由多个组件协作而成。我们以最常见的直角坐标系来举例。直角坐标系中，包括有 xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）三种组件。xAxis、yAxis 被 grid 自动引用并组织起来，共同工作。</p> <p>我们来看下图，这是最简单的使用直角坐标系的方式：只声明了 xAxis、yAxis 和一个 scatter（散点图系列），echarts 暗自为他们创建了 grid 并关联起他们：<br> <img src="https://s1.ax1x.com/2020/03/31/GlJRTx.png" alt="简单散点图坐标系"></p> <p>再来看下图，两个 yAxis，共享了一个 xAxis。两个 series，也共享了这个 xAxis，但是分别使用不同的 yAxis，使用 yAxisIndex 来指定它自己使用的是哪个 yAxis：<br> <img src="https://s1.ax1x.com/2020/03/31/GlJXAP.png" alt="多坐标系指定"></p> <p>再来看下图，一个 echarts 实例中，有多个 grid，每个 grid 分别有 xAxis、yAxis，他们使用 xAxisIndex、yAxisIndex、gridIndex 来指定引用关系：<br> <img src="https://s1.ax1x.com/2020/03/31/GlYG4K.png" alt="多坐标多Grid图"></p> <h3 id="导出-svg-图片"><a href="#导出-svg-图片" class="header-anchor">#</a> 导出 svg 图片</h3> <p>(1) 导出 SVG 图片需要先修改渲染器, 默认使用 canvas 渲染器, 需要改为 SVG 渲染器</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token comment">// 使用 Canvas 渲染器（默认）</span>
<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> renderer<span class="token operator">:</span> <span class="token string">'canvas'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 等价于：</span>
<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">)</span>

<span class="token comment">// 使用 SVG 渲染器</span>
<span class="token keyword">var</span> chart <span class="token operator">=</span> echarts<span class="token punctuation">.</span><span class="token function">init</span><span class="token punctuation">(</span>containerDom<span class="token punctuation">,</span> <span class="token keyword">null</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> renderer<span class="token operator">:</span> <span class="token string">'svg'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre></div><p>(2) 修改工具栏的保存图片格式<br> <code>toolbox.feature.saveAsImage.type</code>表示保存的图片格式。如果初始化图表时<code>renderer</code>类型是 'canvas'（默认），则支持 'png'（默认）和 'jpeg'；如<code>renderer</code> 的类型是 'svg'，则 type 只支持 'svg'。</p> <h2 id="甘特图创建"><a href="#甘特图创建" class="header-anchor">#</a> 甘特图创建</h2> <p>echarts 也可以做甘特图, 但是效果不好, 目前评价比较高的是<a href="https://github.com/DHTMLX/gantt" target="_blank" rel="noopener noreferrer">DHTMLX/gantt<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, 可以在<a href="https://dhtmlx.com/docs/products/dhtmlxGantt/" target="_blank" rel="noopener noreferrer">官网<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>进行下载.<br> <img src="https://s1.ax1x.com/2020/04/02/GYm8js.png" alt="DHTMLX甘特图效果"></p> <p><a href="https://juejin.im/post/5e7ffd56f265da794e526102" target="_blank" rel="noopener noreferrer">掘金甘特图教程<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>详细介绍了在 react 中开发使用甘特图的过程.</p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">更新于:</span> <span class="time">8/7/2021, 12:01:15 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/front-end/node.html" class="prev">
        Node.js深入浅出
      </a></span> <span class="next"><a href="/front-end/npm.html">
        npm常用命令
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/assets/js/app.adf242e6.js" defer></script><script src="/assets/js/2.8cf67c90.js" defer></script><script src="/assets/js/17.bc458c69.js" defer></script>
  </body>
</html>
